<template>
  <div class="app-container">
    <el-row class="wrapper type">
      <el-col :span="7" class="warp-main">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>查询条件
          </p>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="queryKey" placeholder="请输入查询关键字"></el-input>
            </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="appTypeQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="el-bar" style="margin-top:15px;">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>查询列表
          </p>
          <el-table v-loading="loadingAppTypeDataTable" :data="appTypeData" @row-click="appTypeChange" border highlight-current-row style="width: 100%;margin:10px 0">
            <el-table-column prop="name" label="名称" sortable>
            </el-table-column>
            <el-table-column prop="described" label="描述" sortable>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="17" class="warp-main" style="padding-left:10px;">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>明细</p>
          <el-form ref="appType" label-width="80px" :model="appType" :rules="rules1">
            <el-form-item label="名称" prop="type">
              <el-input v-model="appType.type" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
              <el-input type="textarea" v-model="appType.desc" placeholder="请输入描述"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button class="iconfont icon-xinzeng" type="primary" @click="appTypeAddPre">新增</el-button>
              <el-button class="iconfont icon-baocun" type="success" @click="appTypeAdd">保存</el-button>
              <el-button icon="el-icon-delete" type="danger" @click="appTypeDelete" :disabled="this.appType.id==''">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    var validateType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入应用类型名称'));
      } else {
        callback();
      }
    };
    return {
      queryKey: '',
      appType: {
        id: '',
        type: '',
        desc: ''
      },
      appTypeData: [],
      rules1: {
        type: [
          { validator: validateType, trigger: 'blur' }
        ],
        desc: []
      },
      // 应用类型查询遮罩
      loadingAppTypeDataTable: false,
    }
  },
  created: function() {
    this.appTypeQuery();//初始化

  },
  methods: {
    //应用类型列表查询
    appTypeQuery() {
      if (this.$refs['appType'] != undefined) {
        this.$refs['appType'].resetFields();
      }
      this.appType.id = '';
      this.appType.type = '';
      this.appType.desc = '';
      // 发起请求
      let parm = {
        queryKey: this.queryKey,
      };
      // 开启遮罩
      this.loadingAppTypeDataTable = true;
      this.httpClient.httpClientget(this.projectConfig.URL_API_APP_STORE_APP_TYPE, parm).then((response) => {
          // 遮罩结束
          this.loadingAppTypeDataTable = false;
        // 返回处理
        this.appTypeData = response.data;
      }).catch(error => {
          // 遮罩结束
          this.loadingAppTypeDataTable = false;
      });
    },

    //app类型列表单机事件
    appTypeChange: function(row, event, column) {
      this.appType.id = row.id;
      this.appType.type = row.name;
      this.appType.desc = row.described;
    },

    //新增前置
    appTypeAddPre() {
      this.appType.id = '';
      this.appType.type = '';
      this.appType.desc = '';
    },

    //新增
    appTypeAdd() {
      this.$refs['appType'].validate((valid) => {
        if (valid) {
          // 发起请求
          let parm = this.appType;
          let url = this.projectConfig.URL_API_APP_STORE_APP_TYPE;
          if (this.appType.id != '') {
            // 操作审计
            this.userBaseInfo.setOperObjectName(this.appType.type);
            //修改
            this.httpClient.httpClientPatch(url, parm).then((response) => {
              // 返回处理
              if (response.data) {
                //success
                this.appTypeQuery();
              }
            });
          } else {
            // 操作审计
            this.userBaseInfo.setOperObjectName(this.appType.type);
            //新增
            this.httpClient.httpClientPost(url, parm).then((response) => {
              // 返回处理
              if (response.data) {
                //success
                this.appTypeQuery();
              } 
            });
          }
        }
      });
    },
    //应用类型列表查询
    appTypeDelete() {
      this.$confirm('此操作有风险, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        let url = this.httpClient.urlParmHandle(this.projectConfig.URL_API_APP_STORE_APP_TYPE_ID, [this.appType.id]);
        // 操作审计
        this.userBaseInfo.setOperObjectName(this.appType.type);
        this.httpClient.httpClientDelete(url).then((response) => {
          // 返回处理
          if (response.data) {
            //success
            this.appTypeQuery();
          } 
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>
<style>

</style>